<script setup>
import { computed, onMounted, ref } from "vue";
import axios from "axios";
import EchartsCompoBar from "../components/EchartsCompoBar.vue";
import EchartsCompoStack from "../components/EchartsCompoStack.vue";
import EchartsCompoPie from "../components/EchartsCompoPie.vue";

/* 处理GDP数据开始 */
const chartCategory = ref([]);
const chartValue = ref([]);
// 第一产业
const chartValue1st = ref([]);
// 第二产业
const chartValue2nd = ref([]);
// 第三产业
const chartValue3rd = ref([]);
// 人均GDP
const chartValuePer = ref([]);
// 饼状图10年数据
const pieData10year = ref([]);
// 堆叠图的值
const seriesValue = ref([]);
const stackChartType = ref("bar");
const seriesValue01 = ref([]);
const stackChartType01 = ref("line");
const selectedYear = ref("2015");
const selectedYearIndex = ref(0);
const pieYearData = computed(() => {
  return pieData10year.value[selectedYearIndex.value];
});
function changeYearData(name, index) {
  console.log("changeYearData", name);
  selectedYear.value = name;
  selectedYearIndex.value = index;
}
/* 处理GDP数据结束 */

/* 处理人口数据开始 */
const chartPopuCategory = ref([]);
const chartPopuValue = ref([]);
const chartPopuMaleValue = ref([]);
const chartPopuFemaleValue = ref([]);
const chartPopuUrbanValue = ref([]);
const chartPopuRuralValue = ref([]);
// 堆叠图的值
// 柱状图部分
const seriesPopuValueGender = ref([]);
const seriesPopuValueUrbanRural = ref([]);
const popuChartType = ref("bar");
// 饼状图部分
const piePopu10yearCX = ref([]);
const piePopu10yearGender = ref([]);

const popuSelectedYear = ref("2015");
const popuSelectedYearGender = ref("2015");
const popuSelectedYearIndex = ref(0);
const popuSelectedYearIndexGender = ref(0);
const piePopuDataCX = computed(() => {
  return piePopu10yearCX.value[popuSelectedYearIndex.value];
});
const piePopuDataGender = computed(() => {
  return piePopu10yearGender.value[popuSelectedYearIndexGender.value];
});
function changePopuYearData(name, index) {
  popuSelectedYear.value = name;
  popuSelectedYearIndex.value = index;
}
function changePopuYearDataGender(name, index) {
  popuSelectedYearGender.value = name;
  popuSelectedYearIndexGender.value = index;
}
// 显示男女还是城乡
const showChengxiang = ref(true)
const buttonCXNNtext = computed(()=>{
  return showChengxiang.value==true ? '城乡>>>男女' : '男女>>>城乡'
})
function changePopuShow() {
  showChengxiang.value = !showChengxiang.value
}
// cosnt
/* 处理人口数据结束 */
onMounted(() => {
  // 处理GDP数据
  axios.get("http://localhost:8888/chinagdp").then((res) => {
    // console.log("chinagdp", res);
    let category = [],
      value = [],
      value1st = [],
      value2nd = [],
      value3rd = [],
      valueper = [];
    res.data.forEach((element) => {
      category.push(element.year);
      value.push(element.GDP);
      value1st.push(element.primary_industry);
      value2nd.push(element.second_industry);
      value3rd.push(element.third_industry);
      valueper.push(element.per_capita_gdp);
    });
    chartCategory.value = category;
    chartValue.value = value;
    chartValue1st.value = value1st;
    chartValue2nd.value = value2nd;
    chartValue3rd.value = value3rd;
    chartValuePer.value = valueper;
    (seriesValue.value = [
      {
        name: "第一产业",
        type: stackChartType.value,
        stack: "total",
        data: chartValue1st.value,
      },
      {
        name: "第二产业",
        type: stackChartType.value,
        stack: "total",
        data: chartValue2nd.value,
      },
      {
        name: "第三产业",
        type: stackChartType.value,
        stack: "total",
        data: chartValue3rd.value,
      },
    ]),
      (seriesValue01.value = [
        {
          name: "第一产业",
          type: stackChartType01.value,
          stack: "total",
          label: {
            show: true,
          },
          data: chartValue1st.value,
        },
        {
          name: "第二产业",
          type: stackChartType01.value,
          stack: "total",
          label: {
            show: true,
          },
          data: chartValue2nd.value,
        },
        {
          name: "第三产业",
          type: stackChartType01.value,
          stack: "total",
          label: {
            show: true,
          },
          data: chartValue3rd.value,
        },
      ]);
    chartValue1st.value.forEach((item, index) => {
      pieData10year.value.push([
        { value: item, name: "第一产业" },
        { value: chartValue2nd.value[index], name: "第二产业" },
        { value: chartValue3rd.value[index], name: "第三产业" },
      ]);
    });
    console.log("pieData10year", pieData10year.value);
  });
  axios.get("http://localhost:8888/chinapopulation").then((res) => {
    console.log("chinapopulation", res);
    let category = [],
      poputotal = [],
      popumale = [],
      popufemale = [],
      popuurban = [],
      popurural = [];
    res.data.forEach((element) => {
      category.push(element.year);
      poputotal.push(element.total);
      popumale.push(element.male);
      popufemale.push(element.female);
      popuurban.push(element.urban);
      popurural.push(element.rural);
    });
    chartPopuCategory.value = category;
    chartPopuValue.value = poputotal;
    chartPopuMaleValue.value = popumale;
    chartPopuFemaleValue.value = popufemale;
    chartPopuUrbanValue.value = popuurban;
    chartPopuRuralValue.value = popurural;

    seriesPopuValueGender.value = [
      {
        name: "男性入口",
        type: popuChartType.value,
        stack: "total",
        data: chartPopuMaleValue.value,
      },
      {
        name: "女性入口",
        type: popuChartType.value,
        stack: "total",
        data: chartPopuFemaleValue.value,
      },
    ];
    seriesPopuValueUrbanRural.value = [
      {
        name: "城市入口",
        type: popuChartType.value,
        stack: "total",
        data: chartPopuUrbanValue.value,
      },
      {
        name: "农村入口",
        type: popuChartType.value,
        stack: "total",
        data: chartPopuRuralValue.value,
      },
    ];
    chartPopuUrbanValue.value.forEach((item, index) => {
      piePopu10yearCX.value.push([
        { value: item, name: "城市人口" },
        { value: chartPopuRuralValue.value[index], name: "农村人口" },
      ]);
    });
    chartPopuMaleValue.value.forEach((item, index) => {
      piePopu10yearGender.value.push([
        { value: item, name: "男性人口" },
        { value: chartPopuFemaleValue.value[index], name: "女性人口" },
      ]);
    });
  });
});
</script>

<template>
  <div class="barlinecon">
    <div class="viewitem">
      <EchartsCompoStack
        :key="chartValue"
        chartTitle="中国10年GDP堆叠柱状图"
        categoryOn="X"
        categoryName="年份"
        valueName="亿元"
        :chartCategory="chartCategory"
        :seriesValue="seriesValue"
        @change-year="changeYearData"
      ></EchartsCompoStack>
    </div>
    <div class="viewitem">
      <EchartsCompoStack
        v-if="showChengxiang"
        :key="seriesPopuValueUrbanRural"
        chartTitle="中国10年城乡人口堆叠柱状图"
        categoryOn="X"
        categoryName="年份"
        valueName="万人"
        :chartCategory="chartPopuCategory"
        :seriesValue="seriesPopuValueUrbanRural"
        @change-year="changePopuYearData"
      ></EchartsCompoStack>
      <EchartsCompoStack
        v-if="!showChengxiang"
        :key="seriesPopuValueGender"
        chartTitle="中国10年男女人口堆叠柱状图"
        categoryOn="X"
        categoryName="年份"
        valueName="万人"
        :chartCategory="chartPopuCategory"
        :seriesValue="seriesPopuValueGender"
        @change-year="changePopuYearDataGender"
      ></EchartsCompoStack>
      <button class="ancxgender" @click="changePopuShow">{{ buttonCXNNtext }}</button>
    </div>
    <div class="viewitem">
      <EchartsCompoPie
        :key="pieYearData"
        chartTitle="年GDP三次产业构成"
        seriesName="三次产业构成"
        :yearValue="selectedYear"
        :datasValue="pieYearData"
      ></EchartsCompoPie>
    </div>
    <div class="viewitem">
      <EchartsCompoPie
        v-if="showChengxiang"
        :key="piePopuDataCX"
        chartTitle="年城乡入口比例"
        seriesName="城乡入口比例"
        :yearValue="popuSelectedYear"
        :datasValue="piePopuDataCX"
      ></EchartsCompoPie>
      <EchartsCompoPie
        v-if="!showChengxiang"
        :key="piePopuDataGender"
        chartTitle="年男女入口比例"
        seriesName="男女入口比例"
        :yearValue="popuSelectedYearGender"
        :datasValue="piePopuDataGender"
      ></EchartsCompoPie>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.barlinecon {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  //   position: relative;
  //   left: 0;
  //   top: 0;
  display: flex;
  flex-wrap: wrap;
  .viewitem {
    box-sizing: border-box;
    width: 50%;
    height: 50%;
    overflow: hidden;
    position: relative;
    border: 1px solid grey;
    .EchartsCompoStack{
      z-index: 2;
    }
    .ancxgender {
      width: 14rem;
      height: 3rem;
      font-size: 1.6rem;
      background-color: #ccc;
      border-radius: 0.5rem;
      position: absolute;
      right: 2rem;
      top: 1rem;
      z-index: 9;
    }
  }
}
</style>
